<template>
  <div class="dashboard-container">

    <PageTools :show-before="true">
      <span slot="before">共{{ Page.total }}条记录</span>
      <div slot="after">
        <el-button size="small" type="success" @click="$router.push('/import')">导入</el-button>
        <el-button size="small" type="success" @click="exportData">导出</el-button>
        <el-button size="small" type="success" :disabled="!checkPermission('add')" @click="isShowDialog = true">新增员工</el-button>
      </div>
    </PageTools>

    <!-- 放置表格和分页 -->
    <el-card>
      <el-table :data="list">
        <!-- el-table内置属性 type='index' 可以获取表格每一行的序号 -->
        <el-table-column type="index" label="序号" sortable="" />
        <el-table-column prop="username" label="姓名" sortable="" />
        <el-table-column label="脑壳" sortable="" width="120px" align="center">
          <template v-slot="{row}">
            <img
              v-imagerror="require('@/assets/common/kkk.jpg')"
              :src="row.staffPhoto"
              style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
              @click="erweima(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="workNumber" label="工号" sortable="" />
        <!-- 格式化聘用形式 -->
        <el-table-column prop="formOfEmployment" label="聘用形式" sortable="" :formatter="formatEmployment" />
        <el-table-column prop="departmentName" label="部门" sortable="" />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
          <template v-slot="obj">
            <!-- 将这个时间进行美化格式 但是这里后台传过来的时间格式没有问题 -->
            <span>{{ obj.row.timeOfEntry | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enableState" label="账户状态" sortable="">
          <template v-slot="obj">
            <el-switch :value="obj.row.enableState === 1 ? true : false" />
            <!-- <span>{{ obj.row.enableState }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="obj">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${obj.row.id}`)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="editRole(obj.row.id)">角色</el-button>
            <el-button type="text" size="small" @click="deleteEmployee(obj.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev,pager,next"
          :page-size="Page.size"
          :current-page="Page.page"
          :total="Page.total"
          :background="true"
          @current-change="changePage"
        />
      </el-row>
    </el-card>

    <!-- 放置 新增员工组件弹层 -->
    <AddEmployee :is-show-dialog.sync="isShowDialog" />

    <!-- 显示二维码的弹层 -->
    <el-dialog :visible.sync="showCode" title="二维码扫你吗">
      <el-row type="flex" justify="center">
        <canvas ref="MyCanvas" />
      </el-row>
    </el-dialog>

    <!-- 放置分配组件 -->
    <AssignRole ref="assignRole" :show-dialog.sync="isShowAssignRole" :user-id="userId" />
  </div>
</template>

<script>
import { formatDate } from '@/filters/index.js'
import { getEmployeeList, delEmployee } from '@/api/employess.js'
import EmployeeEnum from '@/api/constant/employees.js' // 引入员工的枚举对象
import AddEmployee from './components/add-employee.vue'
import QrCode from 'qrcode' // 生成二维码需要的包
import AssignRole from './components/assign-role'
export default {
  name: '',
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      list: [], // 员工信息
      Page: {
        page: 1, // 页码
        size: 5, // 每页条数
        total: 30
      },
      isShowDialog: false, // 新增员工的dialog弹出层是否显示
      isShowAssignRole: false, // 控制多选框是否显示
      showCode: false, // 控制二维码是否显示的弹出层
      userId: '' // 传递给assign-role组件的
    }
  },
  created() {
    this.getEmployeeInfo() // 获取员工详细信息
  },
  methods: {

    async getEmployeeInfo() {
      const { total, rows } = await getEmployeeList(this.Page) // 接口需要传入参数 page页码，size每页条数
      this.Page.total = total
      this.list = rows // rows 员工信息 数组形式
    },

    changePage(newpage) { // 当点击分页进行切换时会触发分页事件，该事件自带参数为点击的最新的页码
      this.Page.page = newpage // 将要在getEmployeeInfo方法中要用到的this.Page更新数据，即可获取不同的后端数据渲染页面
      this.getEmployeeInfo()
    },

    // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) { // 格式美化 通过el-table-column的formatter 参数为函数
      // console.log(row) 当前行的数据
      // console.log(column) 当前列的数据
      // console.log(cellValue) 当前单元格的value
      // console.log(index)
      // 要去找 1所对应的值
      // 这里 *1 是因为obj.value中的1 2 是数值型，cellvalue的1 2是字符型！所以始终无法相等就会一直显示“未知”
      const obj = EmployeeEnum.hireType.find(item => item.id === cellValue * 1) // find返回符合要求的数组元素 这里的数组元素为一个个的对象
      return obj ? obj.value : '未知' // 处理异常，优化
      // return  obj.value 正常情况这样即可
    },

    async deleteEmployee(id) { // 点击“删除”
      try {
        await this.$confirm('确认删除？')
        await delEmployee(id) // 删除员工 的接口函数
        this.$message.success('删除成功')
        this.getEmployeeInfo() // 重新获取数据
      } catch (err) {
        console.log(err)
      }
    },

    exportData() {
      const headers = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      import('@/vendor/Export2Excel.js').then(async excel => {
        // excel是文件导出的对象 然后引用excel的export_json_to_excel方法
        const { rows } = await getEmployeeList({ page: 1, size: this.Page.total })
        // console.log(rows) rows为 [{},{},{}...]形式 需要通过封装一个函数将他转为[[],[],[]...]形式
        const data = this.formatJson(headers, rows)
        excel.export_json_to_excel({
          // header: ['姓名', '工资'], // 表头 必填
          // data: [['阿牛哥', 8888], ['阿帕奇', 9999]], // 具体数据 必填
          // filename: 'excel-list', // 表名 非必填
          // autoWidth: true, // 自适应宽度 非必填
          // bookType: 'xlsx' // 导出文件的类型 非必填

          // 先搞定表头header 得到需要的['手机号','姓名','入职日期'....]
          header: Object.keys(headers),
          // data格式 得到 [[1786886,'老大'],[17676767,'老二'],[],[]] 这种格式
          data: data,
          filename: 'excel-list', // 表名 非必填
          autoWidth: true, // 自适应宽度 非必填
          bookType: 'xlsx', // 导出文件的类型 非必填
          multiHeader: [['手机号', '姓名', '', '', '', '', '部门'], ['', '', '入职时间', '聘用形式', '', '', '']], // 复杂表头 格式为数组套数组
          merges: ['A1:A2', 'B1:F1', 'G1:G2'] // 实现合并效果
        })
      })
    },

    formatJson(headers, rows) { // 该方法负责将[{},{},{}]数组转化为[[],[],[]...]形式
      return rows.map(item => { // rows为 [{'mobile'：2222,'username':'张三'},{},{}...]形式 item就是它的每一个对象
        return Object.keys(headers).map(key => {
          if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
            // item[headers[key]] 需要被转化的还不符合格式的日期
            return formatDate(item[headers[key]])
          } else if (headers[key] === 'formOfEmployment') { // find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
            var obj = EmployeeEnum.hireType.find(itemitems => itemitems.id === item[headers[key]])
            // return obj.value 将符合要求的值返回即可 下面代码属于优化操作
            return obj ? obj.value : '未知'
          }
          // console.log(1)
          // Object.keys(headers) 得到中文名字的数字 然后再.map 得到每一个中文名
          // 通过这个中文名 在headers中找到对应的英文 再通过这个英文，在item中拿到对应的值
          return item[headers[key]]
        })
      })
    },

    erweima(url) {
      if (url) {
        this.showCode = true // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了

          // qrcode的用法
          // qrcode.toCanvas(dom,info)  dom为一个canvas的dom对象， info为转化二维码的信息
          QrCode.toCanvas(this.$refs.MyCanvas, url) // 将地址转化成二维码 如果这里的info是一句话，那么生成的二维码扫描之后的结果就是那句话
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        console.log('没有头像不哈意思')
      }
    },

    async editRole(id) { // 点击“角色”触发
      this.userId = id
      await this.$refs.assignRole.getUserDetailById(id)
      this.isShowAssignRole = true
    }
  }
}
</script>

<style>

</style>
